<template>
  <div class="wodedingdan">
    <head_>
      <h1  style="width: 200px">我的充值订单</h1>
    </head_>

    <div class="dingdan_list">
      <ul v-for="(item) in list" :key="item.id" @click="account_order_operation(item.id, item.state, item.ucamount)">
        <li>
          <img src="../../assets/dingdanxinxi/kehuyue.jpg" alt />
        </li>
        <li>
          <p>
            <span>订单号：</span>
            <span v-text="item.id"></span>
            <span>订单操作   ></span>
          </p>
          <el-tag >充值金额：￥{{ item.ucamount }}</el-tag>
          <p v-if="item.state===0">充值状态：未支付</p>
          <p v-else-if="item.state===1">充值状态：充值成功</p>
          <p v-else-if="item.state===2">充值状态：充值失败</p>
          <p v-else-if="item.state===3">充值状态：充值取消</p>
          <p v-else-if="item.state===4">充值状态：订单超时</p>
          <p v-if="item.zid===0" style="float: right"><van-tag type="success">充值方式：微信</van-tag></p>
          <p v-if="item.zid===1" style="float: right"><van-tag type="primary">充值方式：支付宝</van-tag></p>
        </li>
      </ul>
    </div>

    <!-- 状态详情pop-->
    <div id="account_order_operation_bored">
      <van-popup :style="{ width: '80%', height: '50%', padding: '10px' }" v-model="show_operations">
        <div class="sg-qrcode">
          <div style="text-align: center">订单详情:
            <img  :src="code_ordermsg" style="width: 100px;height: 100px;margin: 0 auto">
          </div>

          <h1 id="ddd">订单操作</h1>
           <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ account_order_state }}</div>
          <div v-if="account_order_state === 0">
            <van-button class="log" round block type="info" :style="{ width: '100px', height: '40px'}"
              @click="to_do">继续支付
            </van-button>
            <van-button class="log cancel" round block type="info" :style="{ width: '100px', height: '40px'}"
              @click="not_to_do">取消订单
            </van-button>
          </div>
          <div v-else-if="account_order_state === 1">
            <h3>该订单已完成</h3>
          </div>
          <div v-else-if="account_order_state === 2">
            <h3>该订单已失败</h3>
          </div>
          <div v-else-if="account_order_state === 3">
            <h3>该订单已取消</h3>
          </div>
          <div v-else-if="account_order_state === 4">
            <h3>该订单已超时</h3>
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 订单支付pop-->
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show_operations2">
        <div  class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
            backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
            logoBackgroundColor="black"></vue-qr>
          <h2>请扫码充值</h2>
          <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ account_order_state }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 45px' }"
            @click="yizhifu_weixin">
            确认支付</van-button>
        </div>
      </van-popup>
    </div>

    <!--选择支付方式弹出层-->
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
      <!--支付方式-->
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell clickable @click="radio = '1'" class="wei_x">
              <img src="../../assets/dingdanxinxi/weixin.jpg" alt />
              微信
              <template #right-icon>
                <van-radio name="1" icon-size=".32rem" />
              </template>
            </van-cell>
            <van-cell clickable @click="radio = '2'" class="wei_x">
              <img src="../../assets/dingdanxinxi/zhifubao.jpg" alt />
              支付宝
              <template #right-icon>
                <van-radio name="2" icon-size=".32rem" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      <!--充值提交按钮-->
      <div :class="flsdd ? 'zhifu' : 'zhifus'" v-text="zhifus" @click="tijiao">充值</div>
    </van-popup>
  </div>
</template>

<script>
//import { myOrder } from "@/request/home/home_http";
import {
  queryAccountOrderByMemberId,
  accountOrderCancel,
  getWNativeCodeUrl,
  queryPayStatus,
  addmoney,
  getZFBativeCodeUrl,
  queryPayStatustwo, queryPayStatusTWo
} from "../../request/userinfo/userinfo";
import head_ from "./header";
export default {
  props: {},
  data() {
    return {
      list: [],//订单信息
      childlist: null,
      show_operations: false,
      show_operations2: false,
      account_order_id: null,
      account_order_state: null,
      code_url: null,//二维码路径
      code_ordermsg:null,//二维码标题
      money: null,//支付金额
      show:false,//弹出层是否出现，默认关闭
      radio:'1',//支付方式。默认为微信
      flsdd: false,//设置出现支付选择，默认不显示
      zhifus: "立即充值",//充值按钮
    };
  },
  methods: {
    account_order_operation(account_order_id, account_order_state, money){
      if (account_order_state===1){
        this.show_operations = true;
      }else {
        this.show_operations = true
      }
      this.account_order_id = account_order_id;
      this.account_order_state = account_order_state;
      this.money = money;

      this.axios.get("/customer/api/charge/getById/"+1).then(resp=>{
        this.code_ordermsg=resp.data.data
      })

    },

    //继续支付订单
    to_do(){
      this.show=true;
      this.flsdd=true;
    },

    //点击立即充值按钮触发的事件
    tijiao(){
      this.show=false;
      this.flsdd=false;
      if(this.radio==='1'){
        //获得微信二维码
        getWNativeCodeUrl({
          uid: this.account_order_id,
          amount: this.money,
        })
            .then((res) => {
              this.show_operations = false;
              this.show_operations2 = true;
              this.code_url = res.data.codeUrl;

            });
      }else{
        getZFBativeCodeUrl({
          uid: this.account_order_id,
          amount: this.money,
        }).then((res) => {
          this.show_operations = false;
          this.show_operations2 = true;
          this.code_url = res.data.url;
          this.account_order_id=res.data.id;
        })
      }
    },

    //取消订单
    not_to_do(){
      accountOrderCancel({
        id: this.account_order_id,
      }).then((r)=> {
        console.log(r)
        if (r.code === 2000) {
          alert("订单取消成功")
          this.show_operations = false;
        }else{
          this.show_operations = false;
        }
      })
    },

    //此处是点击已支付后检查是否确实已支付
    yizhifu_weixin() {
      if(this.radio==='1'){
        queryPayStatusTWo({
          id: this.account_order_id,
        }).then((r) => {
              if (r.code=== 2000) {
                addmoney({
                  amount: this.money,
                  name:window.localStorage.getItem('ms_username'),//用户账号
                  integration:Math.round(this.money/10),
                })
                    .then((res) => {
                      console.log(res);
                      confirm("充值成功");
                      this.dialogVisible = false;
                      this.show_operations2 = false;
                      this.preLoad();
                      this.$router.push("/wallet");//完成后跳转
                    });
              } else if(r.code === 5000){
               alert("未检测到支付完成，请重新支付") ;
              }
            });
      }else if(this.radio==='2'){
        queryPayStatustwo({
          id: this.account_order_id,
        }).then((r) => {
              if (r.code ===2000) {
                addmoney({
                  amount: this.money,
                  name:window.localStorage.getItem('ms_username'),//用户账号
                  integration:Math.round(this.money/10),
                })
                    .then((res) => {
                      confirm("充值成功");
                      this.dialogVisible = false;
                      this.show_operations2 = false;
                      this.preLoad();
                      this.$router.push("/wallet");//完成后跳转
                    });
              } else if(r.code === 5000) {
                alert("未检测到支付完成，请重新支付")
              }
            });
      }
    },

    preLoad(){
      queryAccountOrderByMemberId({
        pageNo: 1,
        pageSize: 100,
      }).then((res) => {
        if (res.code === 2000) {
          console.log(res.data.records)
          this.list = res.data.records


        } else {
          alert(res.message);
        }
      });
    }
  },

  components: {
    head_,
  },

  mounted() {
    this.preLoad();
  },
};
</script>

<style scoped lang="less">
#account_order_operation_bored h1{
  font-size: 300%;
  font-weight: 600;
}
#account_order_operation_bored h3{
  font-size: 200%;
  color: #000;
}
.cancel{
  background-color: gray;
  border: 1px solid #000;
}
.log{
  margin-left: 15px;
  float: left;
}
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;

  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;

    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;

      // li {
      //   height: 90%;
      // }

      li:nth-child(1) {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 1.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }

      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        p {
          padding: 0 0.21rem;
        }

        p:nth-child(1) {
          //display: flex;
          justify-content: space-between;

          span:nth-child(1) {
            font-size: 0.18rem;
          }

          span:nth-child(2) {
            font-weight: 600;
            font-size: 0.18rem;
          }

          span:nth-child(3) {
            font-weight: 600;
            color: #999;
            font-size: 0.24rem;
            float: right;
          }
        }

        p:nth-child(1),
        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}
//wallet的样式复制
.wodedingdan {
  font-size: 0.24rem;
  margin: 0;
}

.flas_xis {
  height: 4.44rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flas_xis>div:last-child {
  background-color: #f3966e;

  .bor_rder {
    background-color: #f08c29;
  }
}

.mingxi_mudaikuangdanji {
  width: 100%;
  background-color: #1885fe;
  height: 2rem;
  border-radius: 0.18rem;
  display: flex;
  justify-content: space-between;

  .border_left {
    margin-left: 0.48rem;
    color: white;

    &>p:last-child {
      margin-top: 0.1rem;
    }

    &>p {
      font-size: 0.24rem;

      &>.storng {
        font-size: 0.48rem;
      }
    }
  }

  &>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  &>div>.bor_rder {
    color: white;
    font-size: 0.24rem;
    background-color: #0d5fd7;
    width: 1.32rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }
}

.recharge {
  font-size: 0.28rem;
  color: #000;

  .nav_flas {
    line-height: 0.86rem;
    height: 0.86rem;
  }

  .jussd_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;

    &>.bor_bluck {
      border-left: 2px solid #3d88f7;
      border-right: 2px solid #3d88f7;
      border-top: 2px solid #3d88f7;
      border-bottom: 2px solid #3d88f7;
    }

    &>li {
      box-sizing: border-box;
      width: 2.24rem;
      height: 0.99rem;
      border-radius: 0.06rem;
      background-color: #f2f2f2;
      border-top: 2px solid #fafafa;
      border-bottom: 2px solid #fafafa;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      margin-bottom: 0.09rem;

      &>.last_ch {
        margin-top: 0.1rem;
        font-size: 0.24rem;
        color: #333333;
      }
    }
  }
}

.taichu_c {
  color: #333333;
  margin: 0.38rem 0.3rem 0.3rem 0.3rem;

  &>p {
    font-size: 0.28rem;
  }

  &>div {
    margin-top: 0.24rem;
  }

  &>div>p {
    line-height: 0.38rem;
  }
}

.wei_x {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.8rem;
  padding: 0;

  &>div {
    display: flex;
    align-items: center;

    &>img {
      margin-right: 0.29rem;
      width: 0.48rem;
      height: 0.48rem;
    }
  }
}

.xuan_zhuan {
  transform: rotateZ(90deg);
  width: 0.26rem;
  height: 0.26rem;
}

.zhifu {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #3d88f7;
  color: white;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.zhifus {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #f2f2f2;
  color: #999999;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.botm_sc {
  input {
    height: 100%;
    width: 100%;
    color: #0d5fd7;
    text-align: center;
    border: none;
    border: 2px solid #3d88f7;
    border-radius: 0.08rem;
  }
}

.van-loading__spinner--spinner {
  width: 1rem !important;
  height: 1rem !important;
}

.van-toast {
  width: 1rem;
  height: 1rem;
}

.sg-qrcode {
  /*color: deepskyblue;*/
  color: #2ba245;
}

</style>
